<template>
  <div class="basic-layout">

    <!-- <div :class="['content-right', isCollapse ? 'fold' : 'unfold']"> -->
    <div class="nav-top">
      <div class="nav-left"
           @click="goHome()">
        <img src="../assets/yuanquzhihui.png"
             alt=""
             width="50">
        <div class="box-title">企业人事管理系统</div>
      </div>
      <div class="user-info">
        <el-badge class="notice"
                  :value="noticeCount"
                  type="danger"
                  @click="$router.push('/audit/approve')">
          <i class="el-icon-bell"></i>
        </el-badge>
        <el-dropdown @command="handleLogout">
          <!-- <span class="user-link">
                        {{ userInfo.userName }}
                    </span> -->
          <div class="items2">
            <el-avatar :size="37"
                       src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <span class="user-link">
              {{ userInfo.userName }}
              <i class="el-icon-caret-bottom"></i>
            </span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="email">邮箱：{{ userInfo.userEmail }}</el-dropdown-item>
              <el-dropdown-item command="editPassword">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <el-dialog v-model="dialogVisible"
               title="修改密码"
               center
               width="30%"
               @close="exitPassword"
               :close-on-click-modal="false">
      <el-form label-position="left"
               label-width="100px"
               :model="editPassword"
               :rules="rules"
               ref="editForm">
        <el-form-item label="原密码"
                      prop="oldUserPwd">
          <el-input v-model="editPassword.oldUserPwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码"
                      prop="userPwd">
          <el-input v-model="editPassword.userPwd"
                    type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码确认"
                      prop="reUserPwd">
          <el-input v-model="editPassword.reUserPwd"
                    type="password"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="exitPassword">取消</el-button>
          <el-button type="primary"
                     @click="submitPassword">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <div class="box">
      <!-- <div :class="['nav-side', isCollapse ? 'fold' : 'unfold']" class="test"> -->
      <!-- 系统LOGO -->
      <!-- <div class="logo">
                    <img src="./../assets/logo.png" />
                    <span>小陈人事</span>
                </div> -->
      <!-- 导航菜单 -->
      <div class="test nav-side unfold">
        <el-menu :default-active="activeMenu"
                 router
                 class="nav-menu"
                 :default-openeds="['/system','/audit']">
          <tree-menu :userMenu="userMenu" />
        </el-menu>
      </div>
      <div class="wrapper">
        <div class="bread"
             style="margin-bottom:30px">
          <BreadCrumb />
        </div>
        <router-view></router-view>
      </div>
      <div>&nbsp;</div>
    </div>

  </div>
</template>

<script>
import TreeMenu from "./TreeMenu.vue";
import BreadCrumb from "./BreadCrumb.vue";
export default {
  name: "Home",
  components: { TreeMenu, BreadCrumb },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.editPassword.reUserPwd !== '') {
          this.$refs.editForm.validateField('reUserPwd');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.editPassword.userPwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      editPassword: {
        oldUserPwd: '',
        userPwd: '',
        reUserPwd: ""
      },

      rules: {
        oldUserPwd: [{ required: true, message: '请输入原密码', trigger: "blur" }],
        userPwd: [{ validator: validatePass2, trigger: "blur" },
        { required: true, message: '请输入新密码', trigger: "blur" }],
        reUserPwd: [{ validator: validatePass2, trigger: "blur" },
        { required: true, message: '请再次输入新密码', trigger: "blur" }],
      },
      // isCollapse: false,

      // 获取用户信息
      userInfo: this.$store.state.userInfo,
      //  通知数量
      noticeCount: 0,
      // 用户菜单
      userMenu: [],
      // '/system/user' 
      activeMenu: location.hash.slice(1),
    };
  },
  computed: {
    noticeCount() {
      return this.$store.state.noticeCount;
    },
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.activeMenu = val.path
      },
      deep: true
    }
  },
  mounted() {
    // 初始化查询是否有审批
    this.getNoticeCount();
    // 获取菜单
    this.getMenuList();
  },
  methods: {
    goHome() {
      this.$router.push('/welcome')
    },
    // toggle() {
    //     this.isCollapse = !this.isCollapse;
    // },
    handleLogout(key) {
      if (key == "email") return;
      if (key === 'editPassword') {
        this.dialogVisible = true
        return
      }
      this.$store.commit("saveUserInfo", "");
      this.userInfo = {};
      this.$router.push("/login");
    },
    submitPassword() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          this.editPassword.userId = this.$store.state.userInfo.userId
          const res = await this.$api.editPassword(this.editPassword)
          this.$message.success('修改密码成功！')
          this.$store.commit("saveUserInfo", "");
          this.userInfo = {};
          this.$router.push("/login");
        }
      })
    },
    exitPassword() {
      this.$refs.editForm.resetFields()
      this.dialogVisible = false
    },
    // 获取当前用户需要审批的条数
    async getNoticeCount() {
      try {
        // 发送请求获取条数
        const count = await this.$api.noticeCount();
        // 保存到localstroage中
        this.$store.commit("saveNoticeCount", count);
      } catch (error) {
        console.error(error);
      }
    },
    // 获取当前用户权限下所拥有的模块
    async getMenuList() {
      try {
        const { menuList, actionList } = await this.$api.getPermissionList();
        this.$store.commit("saveMenuList", menuList);
        this.$store.commit("saveActionList", actionList);
        this.userMenu = menuList;
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

<style lang="scss">
.el-badge__content {
  border-radius: 50% !important;
  font-size: 12px !important;
  height: 10px !important;
  line-height: 10px !important;
  padding: 2px 4px !important;
}

.el-badge__content.is-fixed {
  right: 7px !important;
}

.box-title {
  margin-left: 30px;
  font-family: SourceHanSansCN-Heavy;
  font-size: 34px;
  color: #ffffff;
  text-align: center;
  // cursor: pointer;
}

.el-dropdown-menu,
.el-menu {
  background: transparent !important;
}

.test {
  background-image: linear-gradient(
    180deg,
    rgba(234, 245, 255, 0.58) 0%,
    rgba(244, 250, 255, 0.57) 24%,
    #ffffff 100%
  );
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.14);
  border-radius: 8px;
}

.basic-layout {
  position: relative;

  .nav-side {
    height: calc(100vh - 120px);
    margin-left: 10px;
    position: absolute;
    width: 200px;
    // height: calc(100vh - 130px);
    // background-color: #001529;
    color: #fff;
    overflow-y: auto;
    transition: width 0.5s;

    .logo {
      margin-left: 10px;
      color: black;
      display: flex;
      align-items: center;
      font-size: 18px;
      height: 50px;

      img {
        margin: 0 16px;
        width: 32px;
        height: 32px;
      }
    }

    .nav-menu {
      height: calc(100vh - 50px);
      height: 100%;
      border-right: none;
      background: transparent;
    }

    // 合并
    &.fold {
      width: 64px;
      overflow: hidden;
    }

    // 展开
    &.unfold {
      width: 200px;
    }
  }

  .nav-top {
    background: #005cf3;
    height: 80px;
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 0 20px;

    .nav-left {
      cursor: pointer;
      display: flex;
      align-items: center;

      .menu-fold {
        margin-right: 15px;
        font-size: 18px;
      }
    }

    .user-info {
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;

      .items2 {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .notice {
        margin-top: 8px;
        line-height: 30px;
        margin-right: 25px;
        cursor: pointer;
      }

      .user-link {
        margin-left: 5px;
        cursor: pointer;
        color: white;
      }
    }
  }

  .wrapper {
    margin: 30px 30px 30px 230px;
    background-image: linear-gradient(
      180deg,
      rgba(234, 245, 255, 0.58) 0%,
      rgba(244, 250, 255, 0.57) 24%,
      #ffffff 100%
    );
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.14);
    border-radius: 8px;
    padding: 20px;
    // height: calc(100% - 130px);

    // .main-page {
    //     background: #fff;
    //     // height: 100%;
    // }
  }
}
</style>